import React from 'react';
import { Box, Text } from '@nova-hf/ui';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import { IContext } from 'beta/typings/context';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { useServiceQuery } from 'typings/graphql';

import Payments from '../../../../../store/payment';
import PaymentMethod from '../../stillingar/containers/PaymentMethod';

type GreidsluProps = {
  payments: Payments;
  customerId: string;
  serviceId: string;
};

const Greidslumati = ({ customerId, serviceId, payments }: GreidsluProps) => {
  const router = useRouter();
  const { data, error, loading } = useServiceQuery({
    variables: {
      serviceId: (router.query.serviceId as string) ?? '',
    },
  });
  const type = data?.service.__typename;
  const COLOR = 'pink';

  if (!data || type !== 'TvService')
    return (
      <Box padding={30}>
        <Text>Something went wrong!</Text>
      </Box>
    );
  if (error || loading)
    return (
      <Box padding={30}>
        <Text>Loading.....</Text>
      </Box>
    );

  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/thjonustur/${serviceId}`}
      title="Breyta greiðslukorti"
      subTitle={payments.itemName}
      icon="wallet"
      childrenBottom={
        <Box>
          <Text variant="pSmallRegular" color="grey500" renderAs="span">
            Upplýsingar og
          </Text>
          <Text variant="pSmallBold" color={COLOR} renderAs="span">
            <a href="https://www.nova.is/nova-tv/spurningar" target="__blank">
              {''} spurningar
            </a>
          </Text>
        </Box>
      }
    >
      <PaymentMethod contractId={payments.contractId} />
    </StepWrapper>
  );
};

Greidslumati.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    serviceId: query.serviceId,
    namespacesRequired: [],
  };
};

export default inject('steps', 'payments')(observer(Greidslumati));